<template>
  <div class="canvasWrap">
    <svg :width="width" :height="height">
      <defs v-if="setting && !setting.ineGradient">
        <linearGradient id="lineGradient0" x1="0" y1="0" x2="1" y2="0">
          <!-- <stop stop-color="rgba(231, 217, 246, 1)" />   -->
          <stop offset="0%" stop-color="rgba(255, 210, 28, 1)" />
          <stop offset="100%" stop-color="rgba(255, 210, 28, 1)" />
        </linearGradient>
      </defs>
      <defs v-if="setting && !setting.ineGradient">
        <linearGradient id="lineGradient1" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="rgba(255, 210, 28, 1)" />
          <stop offset="100%" stop-color="rgba(255, 255, 255, 1)" />
        </linearGradient>
      </defs>
      <line v-for="(link, index) in lineArray" :key="index + JSON.stringify(link)" :x1="link.source.x"
        :y1="link.source.y" :x2="link.target.x" :y2="link.target.y"
        :stroke="setting && setting.color ? setting.color : `url(#lineGradient${index})`"
        :stroke-width="setting && setting.width || 4"></line>
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
    },
    height: {
      type: Number,
    },
    lineArray: {
      type: [Object, Array],
      default: []
      /**
       * [{
       *  source:
       *  {
       *    x:0,
       *    y:0,
       *  },
       *  target:
       *  {
       *    x:0,
       *    y:0,
       *  }
       * }]
       * 
      */
    },
    setting: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
    }
  },
  mounted() {
    // console.log('lineArray==', this.lineArray);
    // console.log('height==', this.height);
    // console.log('width==', this.width);
  },
  methods: {
    // drawLine(startX, startY, endX, endY) {
    //   const canvas = this.$refs.canvas;
    //   const ctx = canvas.getContext('2d');

    //   ctx.beginPath();
    //   ctx.moveTo(startX, startY);
    //   ctx.lineTo(endX, endY);
    //   ctx.strokeStyle = '#FF3510';
    //   console.log('11', this.width);
    //   ctx.stroke();
    // }
  }
};
</script>
<style lang="less" scoped>
.canvasWrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;

  .canvas {
    width: 100%;
    height: 100%;
  }
}
</style>